import React, { Component } from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    Image,
    View,
    Dimensions
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ArticleDetail from '../pages/articleDetail';
import Uri from '../data/api';
import DefaultInfo from '../data/defaultInfo';
const styles = StyleSheet.create({
    articleWrapper: {
        backgroundColor: '#fff',
        marginBottom: 10
    },
    titleWrapper: {
        borderBottomColor: '#efefef',
        borderBottomWidth: StyleSheet.hairlineWidth,
        paddingHorizontal: 15,
        paddingVertical: 10,
        flexDirection: 'row',
        alignItems: 'center'
    },
    img: {
        width: DefaultInfo.deviceWidth
    },
    avatarWrapper: {
        width: 35,
        height: 35,
        borderRadius: 20
    },
    title: {
        flex: 1,
        fontSize: 18,
        color: '#333',
        fontWeight: 'bold',
        paddingLeft: 10,
    },
    contentWrapper: {
        paddingVertical: 10,
        paddingHorizontal: 15,
        marginBottom: 5,
    },
    content: {
        lineHeight: 30
    },
    otherWrapper: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingVertical: 10,
        paddingHorizontal: 15,
        borderStyle: 'dotted',
        borderTopColor: '#efefef',
        borderTopWidth: StyleSheet.hairlineWidth,
    },
    otherInfo: {
        fontSize: 10,
        color: '#999'
    },
    authorDate: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    otherIcon: {
        fontSize: 12,
        color: '#999',
        marginRight: 3
    }
});
export default class Article extends Component {
    gotoDetail = () => {
        const {navigate, article: {_id, name, title} } = this.props;
        navigate('ArticleDetail', {
            id: _id,
            name: name,
            title: title
        })
    };
    render() {
        const {article: {title, post, name, time, head}} = this.props;
        let image, imgUrl,result, content = post;
        result = content.match(/src=.*\.{0,4}"/);
        if (result) {
            imgUrl = result[0].split('"')[1];
            image = <Image source={{uri: Uri.host + imgUrl}}
                           style={{
                               width: DefaultInfo.deviceWidth - 30,
                               height: 150,
                               resizeMode: 'cover'
                           }}/>;
        }
        content = content.replace(/<[^>]*>/g,'');
        content = content.split('\n');
        return (
            <TouchableOpacity style={styles.articleWrapper} onPress={this.gotoDetail}>
                <View style={styles.titleWrapper}>
                    <View style={styles.avatarWrapper}>
                        <Image style={{width: 35, height: 35, borderRadius: 35}} source={{uri: head}}/>
                    </View>
                    <Text numberOfLines={1} style={styles.title}>{title}</Text>
                </View>
                <View style={styles.contentWrapper}>
                    {image}
                    <Text style={styles.content}>{content[0]+ '……'}</Text>
                </View>
                <View style={styles.otherWrapper}>
                    <View style={styles.authorDate}>
                        <Icon style={styles.otherIcon} name='user-circle-o'/>
                        <Text style={styles.otherInfo}>{name}</Text>
                    </View>
                    <View style={styles.authorDate}>
                        <Icon style={styles.otherIcon} name='clock-o'/>
                        <Text style={styles.otherInfo}>{time.minute}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}